<template>
  <div class="whole">
    <el-form
      class="login_con"
      :model="formData"
      status-icon
      :rules="loginRules"
      ref="formData"
    >
      <div class="title">本科毕业设计管理平台</div>
      <div class="login info">
        <div class="user_left"></div>
        <el-form-item class="login_right" prop="loginCode">
          <el-input
            class="login_input"
            type="text"
            placeholder="请输入账号"
            v-model="formData.loginCode"
            ref="login_code_input"
            clearable
          ></el-input>
        </el-form-item>
      </div>
      <div class="login info passwordBox">
        <div class="pwd_left"></div>
        <el-form-item class="login_right" prop="loginPwd">
          <el-input
            class="login_input"
            :type="passwordStyle ? 'text' : 'password' "
            placeholder="请输入密码"
            @keyup.enter.native.prevent="login"
            v-model="formData.loginPwd"
            clearable
          ></el-input>
          <div class="eyeBox">
          <img class="input_eye" src="../../assets/img/login/eye.svg" alt="..." @click="passwordStyle = !passwordStyle">
          <img class="input_eye showEye" src="../../assets/img/login/eye2.svg" alt="..." @click="passwordStyle = !passwordStyle">
          </div>
          
        </el-form-item>
      </div>
      <div class="login btn" @click="login">登录</div>
    </el-form>
  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
import { Base64 } from "js-base64";
export default {
  data() {
    var checkUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      rememberPassword: false,
      passwordStyle:false,
      formData: {
        loginCode: "",
        loginPwd: "",
      },
      loginRules: {
        loginPwd: [{ validator: validatePass, trigger: "blur" }],
        loginCode: [{ validator: checkUserName, trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          let loginForm = {
            loginCode: this.formData.loginCode,
            loginPwd: Base64.encode(this.formData.loginPwd),
          };
          axiosRequest("post", "/login", loginForm).then((res) => {
            if (res.data.code === 200) {
              sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
              this.$router.push({ name: "Home" });
            } else {
              this.$message.error(res.data.data);
            }
          });
        } else {
          this.$message.error("校验不通过，提交失败！");
          return false;
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.login_code_input.focus();
    });
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common/login.css";
.login_con /deep/ .el-form-item {
  margin: 0;
}

.login_con /deep/ .el-form-item__content {
  height: 100%;
}

.login_con /deep/ .el-input__inner {
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0);
  background-image: none;
  border-radius: 0px;
  border: 0px;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: inherit;
  height: 100%;
  line-height: 40px;
  padding: 0 5px;
  outline: 0;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>
